<template>
	<view class="owner-info">
		<text class="txt1">车辆信息</text>
		<view class="txt2">
			<text class="txt2-1">车牌号</text>
			<text class="txt2-2">{{props.item.carName}}</text>
		</view>
		<view class="txt2">
			<text class="txt2-1">车主姓名</text>
			<text class="txt2-2">{{props.item.customName}}</text>
		</view>
		<view class="txt2">
			<text class="txt2-1">联系方式</text>
			<text class="txt2-2">{{props.item.customPhone}}</text>
		</view>
		<view class="txt2">
			<text class="txt2-1">车架号</text>
			<text class="txt2-2">{{props.item.carVin}}</text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		item: {
			type: Object,
			default () {
				return {
					carName: "",
					customPhone: "",
					customName: "",
					carVin: ""
				}
			}
		}
	});
</script>

<style lang="scss" scoped>
	.owner-info {
		width: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: left;
		gap: 10rpx;
		background-color: $main-background-color;

		.txt1 {
			font-family: Alibaba_PuHuiTi_Medium;
			font-weight: 500;
			font-size: 34rpx;
			color: $font-primary-color;
		}

		.txt2 {
			display: flex;
			align-items: center;

			.txt2-1 {
				width: 160rpx;
				font-family: Alibaba_PuHuiTi_Light;
				font-weight: 300;
				font-size: 34rpx;
				color: $font-primary-color;
				margin-right: 30rpx;
			}

			.txt2-2 {
				font-family: Alibaba_PuHuiTi_Light;
				font-weight: 300;
				font-size: 36rpx;
				color: $font-sub-color;
			}
		}
	}
</style>